<template>
    <div style="height: 100%" class="warp-2 body-content">
        <navbar :title="$t('circle_home_1')" :showBackButton=false :showLeftArrow=false></navbar>
        <div class="content">
            <div>
                <van-tabs v-model="active" color="#075ebb" title-active-color="#075ebb" @click="selectTab">
                    <van-tab :title="item.wctName" v-for="item in tabs" :key="item.wctId"></van-tab>
                </van-tabs>
            </div>
            <van-pull-refresh v-model="refreshing" @refresh="onRefresh" loading-text="loading" pulling-text="" loosing-text="" class="circle-list-1">
                <van-list
                    v-model="loading"
                    :finished="finished"
                    :finished-text="(finished&&total>0) ? $t('no_more') : ''"
                    loding-text="loading"
                    @load="onLoad"
                    style="padding-bottom: 56px;">
                    <div class="circle-list-2" v-if="list.length>0">
                        <div class="circle-card" v-for="item in list" :key="item.wcId" @click="toDetail(item)">
                            <div class="card-img">
                                <van-image width="100%" height="100%" fit="cover" :src="appUrl + item.wcIconPath"></van-image>
                            </div>
                            <div class="card-info">
                                <div class="card-title">{{ item.wcName }}</div>
                                <div class="card-data">
                                    <div>{{ $t('circle_home_3', {'value': item.memberCount}) }}</div>
                                    <div>{{ $t('circle_home_4', {'value': item.dynamicCount}) }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--暂无数据-->
                    <div v-if="!loading && total === 0" style="height:100%;">
                        <div class="box-table" style="width:100%;height:100%;">
                            <div class="box-table-cell" style="text-align: center;">
                                <div class="no-data">
                                    <img src="../../../static/images/no-data.png" alt=""/>
                                    <p class="color999">{{ $t('no_data') }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <common-loading :isLoading="loading"></common-loading>
                </van-list>
            </van-pull-refresh>
        </div>
        <bottom-navigation></bottom-navigation>
    </div>
</template>

<script>
import { Tab, Tabs, List, Image, PullRefresh, Toast } from 'vant';
import CommonLoading from '@/components/common/loading';
export default {
    name: 'home',
    components: {
        vanTab: Tab,
        vanTabs: Tabs,
        vanList: List,
        vanImage: Image,
        vanPullRefresh: PullRefresh,
        vanToast: Toast,
        CommonLoading
    },
    data() {
        return {
            pageNo: 1,
            active: 0,
            tabs: [
                {
                    wctId: -1,
                    wctName: this.$t('circle_home_5')
                },
                {
                    wctId: -2,
                    wctName: this.$t('circle_home_6')
                }
            ],
            loading: false,
            finished: false,
            refreshing: false,
            list: [],
            total: 0, // 总数
            usrEntId: window.localStorage.getItem('loginUser')
        };
    },
    methods: {
        getCircleTypes() {
            this.$axios.get('/app/api/work-circle/tag').then(res => {
                if (res.data && res.data.length > 0) {
                    this.tabs = [...this.tabs, ...res.data];
                }
            }).catch(res => {
                if (res.response.data.errCode === 'ERROR_NO_AUTHORITY') { // 获取工作圈分类时权限不足
                    Toast({message: this.$t('Insufficient_permission_working'), forbidClick: true});
                }
            });
        },
        getCircleRmList(url, option) {
            let params = {
                pageNo: this.pageNo,
                pageSize: 10
            };
            if (this.active > 1) {
                params.tagId = this.tabs[this.active].wctId;
            }
            this.total = 0;
            this.$axios.get(url, {params: params}).then(res => {
                if (res && res.status === 200) {
                    if (option && option === 'refresh') {
                        this.list = res.data.results || [];
                    } else {
                        this.list = this.list.concat(res.data.results);
                    }
                }
                this.total = res.data.totalRecord;
                this.loading = false;
                this.pageNo++;
                if (this.list.length >= this.total) {
                    this.finished = true;
                }
            });
        },
        selectTab() {
            this.list = [];
            this.finished = false;
            this.pageNo = 1;
            this.onLoad('refresh');
        },
        indexTab(option) {
            let url;
            if (this.active === 0) {
                url = `/app/api/trainee/work-circle/hottest/${this.usrEntId}`;
                this.getCircleRmList(url, option);
                return;
            }
            url = '/app/api/trainee/work-circle/page';
            this.getCircleRmList(url, option);
        },
        onLoad(option) {
            this.indexTab(option);
        },
        onRefresh() {
            this.refreshing = true;
            setTimeout(() => {
                this.finished = false;
                this.pageNo = 1;
                this.onLoad('refresh');
                this.refreshing = false;
            }, 900);
        },
        //跳转工作圈详情
        toDetail(item) {
            if (item.wcAccessRights) {
                if (item.wcCurrentUserRole !== 'VISITOR') {
                    this.$router.push({path: '/circle/detail', query: {circleId: item.wcId}});
                } else {
                    // 无访问权限
                    Toast(this.$t('circle225'));
                }
            } else {
                this.$router.push({path: '/circle/detail', query: {circleId: item.wcId}});
            }
        }
    },
    mounted() {
        this.getCircleTypes();
    }
};
</script>

<style scoped lang="less">
    .circle-list-1 {
        height: calc(100vh - 200px);
        overflow-y: scroll;
        padding: 10px 15px;
        .circle-list-2 {
            /*columns: 2; // 默认列数*/
            /*column-gap: 10px; // 列间距*/
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            .circle-card {
                border-radius: 5px;
                width: calc(100% / 2 - 5px);
                background: #fff;
                /*break-inside: avoid;*/
                margin-bottom: 10px;
                box-shadow:0px 0px 10px #ccc;
                .card-img {
                    width: 100%;
                    height: 160px;
                    /deep/.van-image__img {
                        border-top-left-radius: 5px;
                        border-top-right-radius: 5px
                    }
                }
                .card-info {
                    padding: 10px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    height: calc(100% - 180px);
                    .card-title {
                        font-size: 14px;
                        color: #000;
                        margin-bottom: 10px;
                        font-weight: 200;
                        /*width: 100%;*/
                    }
                    .card-data {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        font-size: 10px;
                        color: #6F6F6F;
                        /*width: 100%;*/
                    }
                }
            }
        }
    }
</style>
